<!-- 前言 -->
<template>
  <div class="main-header" >
    <div class="main-header-left">
        <p class="candy-text handwriting-effect "><span style="font-size: 18px;">🍃</span><i>Hi</i>~我是福游宝<span class="cute-bubble">🌱</span></p>
        <p class="tip gradient-text cute-bubble">🌿你的专属旅游助手，可以帮助你规划行程和解答出游问题哦！</p>
    


    </div>
    <div class="main-headr-right">
      <img src="@/assets/foreword.jpeg" alt="">
    </div>

  </div>
</template>
<script lang="ts">

</script>

<style lang="less" scoped>
.main-header{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  padding:30px 0;


  img{
    width:100%;
    object-fit: fill;
    border-radius: 50%;
    overflow: hidden;


    box-shadow:   1px 1px 0 #e8f5e9,
    2px 2px 4px rgba(46, 204, 113, 0.3),
    0 0 8px rgba(76, 175, 80, 0.3);

  }
  .name{
    font-size: 20px;
    color: #0f9380;
    font-style: italic;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .tip{
    font-weight: bold;
    line-height: 2;
    text-indent: 2em;
  }

}

// 修改后的绿色主题可爱字体样式
.cute-text-base {
  font-family: cursive;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: #28a745; // 主绿色
}

// 青苹果泡泡字
.cute-bubble {
  .cute-text-base();
  text-shadow: 
    1px 1px 0 #e8f5e9,
    2px 2px 4px rgba(46, 204, 113, 0.3),
    0 0 8px rgba(76, 175, 80, 0.3);
}

// 森林立体字
.candy-text {
  .cute-text-base();
  text-shadow: 
    0 1px 0 #e8f5e9,
    0 2px 0 #c8e6c9,
    0 3px 0 #a5d6a7,
    0 4px 8px rgba(46, 204, 113, 0.4);
}

// 渐变绿叶效果
.gradient-text {
  background: linear-gradient(45deg, #34d399, #10b981);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

// 手写装饰线（改为青绿色）
.handwriting-effect::before {
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    #66bb6a 3px,
    #66bb6a 6px
  );
}



</style>
